<template>
  <div class="video-view">
    <span>视频预览</span>
    <div class="dplayer"></div>
  </div>
</template>

<script>
import DPlayer from "dplayer";
export default {
  name: "VideoView",
  props: ["videoSrc"],
  watch: {
    videoSrc: {
      handler(newVal) {
        if (newVal !== undefined) {
          this.initVideo(newVal);
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 初始化播放器
    initVideo(videoUrl) {
      const dp = new DPlayer({
        container: document.querySelector(".dplayer"),
        video: {
          url: videoUrl,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.video-view {
  span {
    display: inline-block;
    font-size: 17px;
    margin-bottom: 10px;
  }
  .dplayer {
    box-shadow: 0px 2px 3px #ccc;
    width: 700px;
    height: 400px;
  }
}
</style>